<template>
  <div id="give">
    <!--搜索-->
    <div class="search-content">
      <el-input v-model="givenName" placeholder="请输入赠送方昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-input v-model="receiveName" placeholder="请输入接收方昵称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-input v-model="giftName" placeholder="请输入礼物名称查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH-mm-ss"
        @change="inquiryList"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="赠送方昵称" prop="fromMember" align="center">
          <template slot-scope="scope" >
            <span v-if="scope.row.fromMember" class="publicStyle"  @click="viewGiven(scope.$index, scope.row)">{{scope.row.fromMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="接收方昵称" prop="toMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.toMember" class="publicStyle"  @click="viewReceiver(scope.$index, scope.row)">{{scope.row.toMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="礼物名称" prop="gift" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.gift" class="publicStyle"  @click="viewGift(scope.$index, scope.row)">{{scope.row.gift.zhCnName}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="赠送数量" prop="num"  align="center" />
        <el-table-column label="花费金币数" prop="goldNum"  align="center" />
        <el-table-column label="赠送时间" prop="time"  align="center" />
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--赠送方、接收方详情蒙层-->
    <el-dialog id="give-dialog" title="用户详情" :visible.sync="giveDialogVisible" v-if="DetailData">
      <el-form label-position="right" label-width="120px"  :model="DetailData">
        <div>
          <el-form-item label="用户名称：" v-if='DetailData.userName'>
            <div>{{DetailData.userName}}</div>
          </el-form-item>
          <el-form-item label="用户性别：" >
            <div>{{DetailData.sex==='man'?'男':'女'}}</div>
          </el-form-item>
          <el-form-item label="用户头像：" v-if='DetailData.httpAvatar'>
            <img :src='DetailData.httpAvatar' width="60" height='60' alt='头像有误' />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="用户昵称：" v-if='DetailData.name'>
            <div>{{DetailData.name}}</div>
          </el-form-item>
          <el-form-item label="是否在线：">
            <div v-if='DetailData.isOnLine'>在线</div>
            <div v-else>离线</div>
          </el-form-item>
          <el-form-item label="会员等级：">
            <el-tag size="small" v-if="DetailData.grade==='ordinary'"  type="info">普通用户</el-tag>
            <el-tag size="small" v-if="DetailData.grade==='blueDiamond'">蓝钻VIP</el-tag>
            <el-tag size="small" v-if="DetailData.grade==='anCrown'" type="warning">皇冠VIP</el-tag>
          </el-form-item>
          <el-form-item label="VIP到期时间：">
            <div>{{DetailData.vipDate}}</div>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
    <!--礼物详情蒙层-->
    <el-dialog id="gift-dialog" title="礼物详情" :visible.sync="giftDialogVisible" v-if="giftDetailData">
      <el-form label-position="right" label-width="140px"  :model="giftDetailData">
        <el-form-item label="礼物名称：" v-if='giftDetailData.zhCnName'>
          <div>{{giftDetailData.zhCnName}}</div>
        </el-form-item>
        <el-form-item label="礼物备注：" v-if='giftDetailData.zhCnInfo'>
          <div>{{giftDetailData.zhCnInfo}}</div>
        </el-form-item>
        <el-form-item label="礼物价格：" v-if='giftDetailData.price'>
          <div>{{giftDetailData.price}}</div>
        </el-form-item>
        <el-form-item label="礼物图像：" v-if='giftDetailData.httpPath'>
          <img :src='giftDetailData.httpPath' width="80" height='80' alt='头像有误' />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  export default {
    name: "GiveList",
    data(){
      return{
        // 查询
        givenName:"",
        receiveName:'',
        giftName:'',
        dateTimeRange:[],
        isClearable:true,
        // 列表数据
        tableData:[],
        //赠送方、接收方详情
        giveDialogVisible:false,
        DetailData:{},
        //礼物详情
        giftDialogVisible:false,
        giftDetailData:{},
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods:{
      isNotNull(value){
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList(){
        let that=this;
        that.tableData=[];
        let data={
          pageNumber:that.currentPage,
          pageSize:that.pageSize,
          filters:[]
        };
        if(that.isNotNull(that.givenName)){ //赠送方昵称
          data.filters.push({
            property:"fm.name",
            value:that.givenName,
            operator: "eq"
          })
        }
        if(that.isNotNull(that.receiveName)){ //接收方昵称
          data.filters.push({
            property:"tm.name",
            value:that.receiveName,
            operator: "eq"
          })
        }
        if(that.isNotNull(that.giftName)){ //礼物名称
          data.filters.push({
            property:"g.zh_cn_name",
            value:that.giftName,
            operator: "like"
          })
        }
        if(this.isNotNull(that.dateTimeRange)){ //赠送时间范围
          data.filters.push({
            property:"mg.time",
            value:that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property:"mg.time",
            value:that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: 'admin/gift/member/list',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:data
        }).then(function (res) {
          if(res.code===200){
            that.total=res.data.total;
            let arr=res.data.records;
            if(arr.length===0){
              that.tableData=[];
            }else{
              that.tableData=arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //查看赠送方详情
      viewGiven(index,row){
        this.giveDialogVisible=true;
        this.DetailData=row.fromMember;
      },
      //查看接收方详情
      viewReceiver(index,row){
        this.giveDialogVisible=true;
        this.DetailData=row.toMember;
      },
      //查看礼物详情
      viewGift(index,row){
        this.giftDialogVisible=true;
        this.giftDetailData=row.gift;
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.inquiryList();
      }
    }
  }
</script>

<style scoped src="../../assets/css/giftManagement/giveList.css">

</style>
